<template>
  <div class="content-main__item">
    <div class="main-item__left">
      <img
        class="item-left__icon"
        :src="require(`@/assets/images/icon_${props.item.lifeCycleStage}.png`)"
      />
      <div class="item-left__info">
        <div class="left-info__title g-cur-poi" @click="onClick">{{
          props.item.lifeCycleStage ? ProcessStageMap[props.item.lifeCycleStage] : '-'
        }}</div>
        <div class="left-info__tags">
          <div
            class="left-info__tag"
            :class="!stageData.dataNum ? 'left-info__tag--zero' : ''"
            v-for="stageData in props.item.stageDataList"
            :key="stageData.dataType"
          >
            <CIcon class="info-tag__icon" :type="FlowTypeIconMap[stageData.dataType]"></CIcon>
            <span
              >{{
                stageData.dataType
                  ? FlowTypeMap[props.item.lifeCycleStage][stageData.dataType] || '-'
                  : '-'
              }}
              {{ stageData.dataNum || 0 }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="main-item__right">
      <el-button @click="onClick">{{
        ProcessStageDrawerBtnMap[props.item.lifeCycleStage]
      }}</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup name="ContentMainItem">
import { defineProps, defineEmits, computed } from 'vue';
import type { StageListItem } from '@/apis/pcf/myModel/model/modelDetailModel';
import {
  ProcessStageDrawerBtnMap,
  ProcessStageMap,
  FlowTypeMap,
  FlowTypeIconMap
} from '@/constants/enum';

interface ContentMainItemProps {
  item: StageListItem;
}
const props = defineProps<ContentMainItemProps>();
const emits = defineEmits(['btnClick']);

function onClick() {
  emits('btnClick', props.item.lifeCycleStage);
}
</script>

<style lang="scss" scoped>
.content-main__item {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #f0f4f7;
  .main-item__left {
    display: flex;
    align-items: center;
    .item-left__icon {
      width: 48px;
      height: 48px;
      border-radius: 6px;
    }
    .item-left__info {
      margin-left: 13px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      height: 48px;

      .left-info__title {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #0a1f33;
        line-height: 22px;
      }
      .left-info__tags {
        display: flex;
        .left-info__tag {
          display: flex;
          align-items: center;
          padding: 0 6px;
          height: 20px;
          border-radius: 2px;
          border: 1px solid rgba(3, 172, 130, 0.3);
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #03ac82;
          line-height: 20px;
          background-color: rgba(3, 172, 130, 0.04);
          .info-tag__icon {
            margin-right: 4px;
            font-size: 12px;
          }
          &.left-info__tag--zero {
            background-color: #f3f7fb;
            color: #7a8a99;
            border-color: #ebeff2;
          }
        }

        .left-info__tag + .left-info__tag {
          margin-left: 4px;
        }
      }
    }
  }
}
.content-main__item + .content-main__item {
  margin-top: 12px;
}
</style>
